<template>
  <div>
    <el-input style="width: 150px" v-model="title" />
    <el-row>
      <h3>
        mouse
      </h3>
    </el-row>
    <el-row>
      x: {{ mouseX }}, y: {{ mouseY }}, sourceType: {{ sourceType }}
    </el-row>

    <div ref="el" :style="style" style="position: fixed;background: #190;color: #fff;padding: 10px">
      Drag me! I am at {{x}}, {{y}}
    </div>

    <div style="margin-top: 30px">
      <el-row style="margin-top: 30px">
        <span style="margin-right: 20px">File Input</span>
        <div>
          <input mt-2 type="file" @input="onFileInput">
        </div>
      </el-row>
      <el-row style="margin-top: 30px">
        <span style="margin-right: 20px">Base64</span>
        <textarea style="height: 200px;width: 300px" :value="base64" readonly />
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 注意：这里只是展示如何接入vueuse，实际开发中适时选择！本demo内暂时不打算大范围使用vueuse
import useTitle from '@hooks/useTitle'
import useMouse from '@hooks/useMouse'
import { useDraggable, useBase64 } from '@vueuse/core'
import { ref } from 'vue'

const { title } = useTitle()
const { x: mouseX, y: mouseY, sourceType } = useMouse()

const el = ref(null)
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 100, y: 100 },
})

let file = ref()
const { base64 } = useBase64(file)
function onFileInput(e) {
  file.value = e.target.files[0]
}
</script>